import React from 'react';
import { Modal, Select, InputNumber, Tabs, Switch, Form } from 'antd';

const { TabPane } = Tabs;

const defaultParams = {
  decimal: 2,
  unit: 'none',
  thousandSign: true,
  percentDecimal: 2,
  date: 'none',
};

const DataFormat: React.FC<{
  params?: {
    decimal: number; //小数位
    unit: 'none' | 'W' | 'Y'; //单位
    thousandSign: boolean; //千位符
    percentDecimal: number; //百分比小数位
    date: 'none' | 'DURATION' | 'DURATION_SUB'; //时间
  };
  isModalVisible: boolean;
  handleCancel: () => void;
  handleOk: (datasource: any) => void;
}> = ({ params, isModalVisible, handleCancel, handleOk }) => {
  const [form] = Form.useForm();

  return (
    <Modal
      title="数值过滤"
      visible={isModalVisible}
      onCancel={handleCancel}
      cancelText="取消"
      okText="确定"
      onOk={() => handleOk({ ...params, ...form.getFieldsValue() })}
    >
      <Form initialValues={{ ...defaultParams, ...params }} form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 14 }} layout="horizontal">
        <Tabs tabPosition="left">
          {/* 数字 */}
          <TabPane tab="数字" key="number">
            <Form.Item label="小数位" name="decimal">
              <InputNumber min={0} max={50} />
            </Form.Item>
            <Form.Item label="单位" name="unit">
              <Select>
                <Select.Option value="none">无</Select.Option>
                <Select.Option value="W">万</Select.Option>
                <Select.Option value="Y">亿</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="千位符" name="thousandSign" valuePropName="checked">
              <Switch checked />
            </Form.Item>
          </TabPane>
          {/* 百分比 */}
          <TabPane tab="百分比" key="percent">
            <Form.Item label="小数位" name="percentDecimal">
              <InputNumber min={0} max={50} />
            </Form.Item>
          </TabPane>
          {/* 时间 */}
          <TabPane tab="时间" key="date">
            <Form.Item label="换算规划" name="date">
              <Select>
                <Select.Option value="none">无</Select.Option>
                <Select.Option value="DURATION">{`Duration in ms (66000 => 1m 6s)`}</Select.Option>
                <Select.Option value="DURATION_SUB">{`Duration in ms (100.40008 => 100ms 400µs 80ns)`}</Select.Option>
              </Select>
            </Form.Item>
          </TabPane>
        </Tabs>
      </Form>
    </Modal>
  );
};

export default DataFormat;
